<template>
	<div class="container">
		<div class="content">
			<div class="left">收支明细</div>
			<div class="right">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item>首页</el-breadcrumb-item>
					<el-breadcrumb-item>账户管理</el-breadcrumb-item>
					<el-breadcrumb-item><a href="#">收支明细</a></el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<hr class="margin-h">
		<div class="income">
			<el-form ref="searchForm" :model="sizeForm" label-width="90px" size="mini">
				<el-form-item label="选择类型" prop="type">
					<el-select v-model="sizeForm.type">
						<el-option label="线上退款" value="线上退款"></el-option>
						<el-option label="即时退款" value="即时退款"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间" prop="date">
					<el-date-picker value-format="yyyy-MM-dd" prop="date" v-model="sizeForm.date" type="date"
						placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="资金流水号" prop="num">
					<el-input v-model="sizeForm.num"></el-input>
				</el-form-item>
				<el-form-item size="large">
					<el-button>搜索</el-button>
					<el-button @click="resetForm('searchForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="record">共{{tableData.length}}笔对账记录</div>
		<el-table border :data="ftableData.slice((currentPage-1)*pagesize,currentPage*pagesize)">
			<el-table-column prop="date" label="创建时间">
			</el-table-column>
			<el-table-column prop="num" label="资金流水号">
			</el-table-column>
			<el-table-column prop="type" label="类型">
			</el-table-column>
			<el-table-column prop="scene" label="场景">
			</el-table-column>
			<el-table-column prop="dnum" label="支付核心单号">
			</el-table-column>
			<el-table-column prop="income" label="收入">
			</el-table-column>
			<el-table-column prop="outcome" label="支出">
			</el-table-column>
			<el-table-column prop="balance" label="账户余额">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button @click.native.prevent="handleDelete(scope.$index,scope.row, tableData)" type="danger"
						size="mini">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize"
			layout="total, prev, pager, next,jumper" :total="tableData.length">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		computed: {
			ftableData() {
				return this.tableData.filter(item => {
					var flag = true;
					//对搜索sizeForm对象进行遍历
					for (var k in this.sizeForm) {
						//如果搜索条件不为空才进行搜索
						if (this.sizeForm[k] != "") {
							//如果当前遍历item对应的k不包含当前搜索对应的k
							if (!item[k].includes(this.sizeForm[k])) {
								//flag值改变false(当前数据就会被过滤掉)
								flag = false;
							}
						}
					}
					return flag;
				})
			}
		},
		data() {
			return {
				v1: '',
				v2: '',
				lineData: [],
				username: '',
				total: 0, //实现动态绑定
				pagesize: 8, //每页的条数
				currentPage: 1, //初始页
				radio: '今天',
				sizeForm: {
					num: '',
					date: '',
					type: ''
				},
				tableData: [],
			};
		},
		created() {
			this.getListUser()
		},
		methods: {
			//重置搜索表单
			resetForm(formName) {
				this.$refs[formName].resetFields()
			},
			//当改变每页显示条数的选择器时会触发的事件
			// handleSizeChange(size) {
			// 	// 每页显示的数量是我们选择器选中的值size
			// 	this.pageSize = size;
			// 	console.log(this.pageSize); //每页下拉显示数据
			// },
			//当改变当前页数的时候触发的事件
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage); //点击第几页
			},
			handleDelete(index, row, tableData) {
				console.log(index, row, tableData);
				this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.tableData.splice(index, 1)
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			onSubmit() {
				console.log('submit!');
			},
			getListUser() {
				this.$http.post("/list/user", {
						id: 43589
					})
					.then(res => {
						this.tableData = res.data.list;
						console.log("getListUser", res.data);
					})
			},
		}
	};
</script>

<style scoped="scoped">
	.record {
		margin: 25px 20px;
	}

	.income {
		width: 750px;
		margin: 25px 20px;
		height: 200px;
	}

	.container {
		width: 100%;
	}

	.content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 17px;
		margin: 25px 20px;
		padding-left: 10px;
		border-left: 1px solid #0075D2;
	}

	.margin-h {
		margin-left: 20px;
		margin-right: 20px;
	}

	a {
		font-weight: 700 !important;
	}

	hr {
		margin: 0;
		padding: 0;
		border: none;
		border-bottom: 1px solid #ddd;
		height: 0;
	}
</style>
<style>
	.el-breadcrumb__inner {
		color: #666666 !important;
	}

	.el-breadcrumb {
		font-size: 12px !important;
	}

	.el-form {
		height: 100%;
	}

	.el-form-item--mini.el-form-item {
		margin-bottom: 18px !important;
	}

	.el-pagination {
		margin: 20px 25px;
		float: right;
	}

	.el-range-editor.el-input__inner {
		margin-left: 10px;
	}

	.income .el-input__inner {
		width: 193px;
	}
	.cell{
		font-size: 14px !important;
	}
</style>
